import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { List, ActionSheet } from 'antd-mobile'
import AccountPresentVM from 'cvm/accountPresent/accountPresent'
// import ActionSheet from '../../components/actionSheet'
import './accountPresent.less'

@observer
class accountPresent extends Component {
  constructor (props) {
    super(props)
    window.document.title = '提现账户'
    this.vm = new AccountPresentVM(props)
  }
  showActionSheet = () => {
    const BUTTONS = ['银行卡', '微信零钱账户', '取消']
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      maskClosable: true,
      'data-seed': 'logId'
    },
    (buttonIndex) => {
      this.vm.handleChooseMode(buttonIndex)
    })
  }
  render () {
    return (
      <div>
        <div className='account-present'>
          <List>
            <List.Item
              arrow='horizontal'
              onClick={this.showActionSheet}
              // onClick={e => {
              //   ActionSheet.openActionSheetWithOptions(
              //     {
              //       options: ['银行卡', '微信零钱账户']
              //     },
              //     selectedIndex => {
              //       console.log(selectedIndex)
              //       switch (selectedIndex) {
              //         case 0:
              //           this.vm.handleChooseMode(selectedIndex)
              //           console.log(1)
              //           break
              //         case 1:
              //           this.vm.handleChooseMode(selectedIndex)
              //           console.log(2)
              //           break
              //         default:
              //           break
              //       }
              //     }
              //   )
              //   e.preventDefault()
              // }}
            >
              {
                (this.vm.cashType === '0' || this.vm.cashType === undefined) ? '请选择提现方式' : null
              }
              {
                this.vm.cashType === '1' ? '微信零钱账户' : null
              }
              {
                this.vm.cashType === '2' ? '银行卡' : null
              }
            </List.Item>
          </List>
          {
            this.vm.cashType === '2' ? <div className='list-detail flex-wrap' onClick={() => { this.vm.handleBackWithdraw() }}>
              <div className='flex-1 left bank-logo'><img src={require('../../images/banklogo.png')} /></div>
              <div className='flex-4 right'>{decodeURI(this.vm.bankName)}({this.vm.bankNum.substring(this.vm.bankNum.length - 4)})</div>
            </div> : null
          }
          {
            this.vm.cashType === '1' ? <div className='list-detail flex-wrap' onClick={() => { this.vm.handleBackWithdraw() }}>
              <div className='flex-1 left'><img src={this.vm.bankNum} /></div>
              <div className='flex-4 right'>{decodeURI(this.vm.bankName)}(微信)</div>
            </div> : null
          }
        </div>
      </div>
    )
  }
}

export default accountPresent
